<template>
  <div id="voteList">
    <div class="tab-wrap">
      <div class="item" :class="selTab == 1? 'on' : ''" @click="chagneTab(1)">进行中</div>
      <div class="item" :class="selTab == 2? 'on' : ''" @click="chagneTab(2)">已结束</div>
    </div>
    <div class="scroll-wrap" v-if="list.length != 0">
      <div class="bscroll-container" v-if="list.length != 0 && selTab == 1">
        <div class="content">
          <div
            class="scroll-item"
            v-for="(item,index) in list"
            :key="index"
            @click="navDetail(item.id,item.signup_id,item.genre)"
          >
            <div class="top">
              <span class="id">投票编号：{{item.number}}</span>
              <span>发布人：{{item.publisher}}</span>
            </div>
            <div class="mid">
              <h3>{{item.title}}</h3>
              <p class="desc">{{item.content}}</p>
              <p class="text">
                表决类型：
                <span v-if="item.genre==0">单项表决</span>
                <span v-if="item.genre==1">多选一表决</span>
                <span v-if="item.genre==2">选举表决</span>
              </p>
              <!-- <p class="text">业主总数量：{{item.boss_num}}人</p> -->
              <!-- <p class="text">业主专有面积总数量：{{item.area_num}}</p> -->
              <p class="text">投票时间：{{item.createtime}} - {{item.endtime}}</p>
            </div>
            <div class="btn-blcok">
              <div class="btn" v-if="item.timeStatus== 0">
                <md-button class="default" size="small" round>投票未开始</md-button>
              </div>
              <div class="btn" v-if="item.timeStatus== 1 && item.join == 0">
                <md-button type="primary" size="small" round>进入投票页</md-button>
              </div>
              <div class="btn" v-if="item.timeStatus== 1 && item.join == 1">
                <md-button class="has-join" size="small" round>您已经投票</md-button>
              </div>
              <div class="btn" v-if="item.timeStatus== 2">
                <md-button class="end" size="small" round>已截止投票</md-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bscroll-container" v-if="endVoteList.length != 0 && selTab == 2">
      <div class="content">
        <div
          class="end-vote-item"
          v-for="(item,index) in endVoteList"
          :key="index"
          @click="navDetail(item.id,item.signup_id,item.genre)"
        >
          <div class="top">
            <span class="id">投票编号：{{item.number}}</span>
            <span>发布人：{{item.publisher}}</span>
          </div>
          <div class="mid">
            <h3>{{item.title}}</h3>
            <p class="desc">{{item.content}}</p>
            <!-- <p class="text">{{item.num}}名业主已投票，占小区业主人数{{item.percentage}}%</p> -->
            <!-- <p class="text">占业主专有面积总数{{item.area_percentage}}%</p> -->
            <p class="text">投票截止时间：{{item.endtime}}</p>
          </div>
          <div class="btn-blcok">
            <div class="btn nav-many" v-if="item.end_time != ''">
              <md-button type="default" size="small" round>查看详情</md-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="empty-list"
      v-if="(list.length == 0 && selTab == 1) || (endVoteList.length == 0 && selTab == 2)"
    >
      <p>暂无表决信息</p>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import https from "@/https";
import config from "@/config";
import { Progress, Toast, Button } from "mand-mobile";

export default {
  components: {
    [Progress.name]: Progress,
    [Button.name]: Button
  },
  name: "voteList",
  data() {
    return {
      id_card: "", //身份证
      list: [], //
      endVoteList: [] //已结束表决
    };
  },
  computed: {
    selTab() {
      return this.$store.state.voteListType;
    },
    mobile() {
      return this.$store.getters.getUserInfo.mobile;
    }
  },
  methods: {
    chagneTab(index) {
      this.$store.commit("saveVoteListType", index);
      if (index == 1) {
        this.getBallotList();
      } else if (index == 2) {
        this.getBallotOverdueList();
      }
    },
    // 获取列表
    getBallotList() {
      Toast.loading("加载中...");
      let params = {
        qid: this.$store.state.residentialType.qid,
        uid: this.$store.getters.getUserInfo.id,
        id_card: this.id_card
      };
      https
        .fetchPost(config.getTemporaryBallotList, params)
        .then(res => {
          // console.log(res.data);
          Toast.hide();
          if (res.data.code == 1) {
            let list = res.data.data.votelList;
            if (list.length != 0) {
              let timeNow = new Date().getTime();
              let timeStatus = 0;
              list.forEach(item => {
                let yanTime = 3 * 24 * 60 * 60 * 1000;
                if (item.createtime * 1000 > timeNow) {
                  timeStatus = 0; //未开始投票
                } else if (
                  item.createtime * 1000 < timeNow &&
                  item.endtime * 1000 + yanTime > timeNow
                ) {
                  timeStatus = 1; //投票进行中
                } else if (item.endtime * 1000 + yanTime < timeNow) {
                  timeStatus = 2; //投票已经结束
                }
                item.timeStatus = timeStatus;
                item.createtime = this.dataFormat(item.createtime * 1000, 2);
                item.endtime = this.dataFormat(item.endtime * 1000, 2);
              });
            }
            this.list = list;
          } else {
            Toast.hide();
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    navDetail(bid, signup_id, genre) {
      this.$router.push({
        path: "/localeVoteDetail",
        query: { bid: bid, id_card: this.id_card, genre, signup_id: signup_id }
      });
    },
    getBallotOverdueList() {
      Toast.loading("加载中...");
      let params = {
        qid: this.$store.state.residentialType.qid,
        uid: this.$store.getters.getUserInfo.id,
        id_card: this.id_card
      };
      https
        .fetchPost(config.getTemporaryBallotOverdueList, params)
        .then(res => {
          console.log(res.data);
          Toast.hide();
          if (res.data.code == 1) {
            let list = res.data.data.votelList;
            if (list.length != 0) {
              list.forEach(element => {
                element.createtime = this.dataFormat(
                  element.createtime * 1000,
                  2
                );
                element.endtime = this.dataFormat(element.endtime * 1000, 2);
              });
              this.endVoteList = list;
            }
          } else {
            Toast.hide();
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 时间戳转换
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (type == 1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d + " " + h + ":" + i;
      }
    }
  },
  created() {
    this.id_card = this.$route.query.id_card;
    let type = this.selTab;
    if (type == 1) {
      this.getBallotList();
    } else if (type == 2) {
      this.getBallotOverdueList();
    }
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.md-notice-bar {
  z-index: 1;
}
button {
  z-index: 1;
}
#voteList {
  background: #fff;
  .tab-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    background: #fff;
    z-index: 999 !important;
    border-bottom: 1px solid #f2f2f2;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      height: 80px;
      font-size: 30px;
      color: #666;
      &.on {
        color: #2f86f6;
        box-shadow: inset 0 -4px 0 #2f86f6;
      }
    }
  }
  .bscroll-container {
    padding-bottom: 50px;
    padding-top: 80px;
  }
  .scroll-wrap {
    // height: 100vh;
    .tip {
      padding: 20px 30px 10px;
    }
    .scroll-item {
      box-shadow: 0 1px 16px #ddd;
      margin: 30px 30px 0;
      padding-bottom: 35px;
      border-radius: 8px;
      .top {
        padding: 0 20px;
        font-size: 24px;
        color: #fff;
        display: flex;
        background: linear-gradient(to right, #5299f5, #2f86f6);
        justify-content: space-between;
        align-items: center;
        height: 70px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        .status {
          color: #fff;
          font-size: 26px;
        }
      }
      .mid {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 0 20px;
        h3 {
          font-size: 32px;
          line-height: 50px;
          padding: 20px 0 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .desc {
          font-size: 28px;
          color: #777;
          line-height: 40px;
          margin-top: 20px;
        }
        .text {
          margin-top: 20px;
          font-size: 26px;
          color: #2f86f6;
        }
      }
      .btn-blcok {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
        .btn {
          width: 250px;
          margin: 10px 20px;
          .end {
            background: #e2e4ea;
            color: #fff;
            &:after {
              border: 1px solid #e2e4ea;
            }
          }
          .has-join {
            background: #7ccd7c;
            color: #fff;
            &:after {
              border: 1px solid #7ccd7c;
            }
          }
        }
      }
      .rule {
        font-size: 24px;
        color: #999;
        line-height: 40px;
        padding: 0 30px;
        margin-top: 20px;
      }
    }
  }
  .empty-list {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 26px;
    padding-top: 150px;
  }
  .end-vote-item {
    box-shadow: 0 1px 16px #ddd;
    margin: 30px 30px 0;
    padding-bottom: 35px;
    border-radius: 8px;
    .top {
      padding: 0 20px;
      font-size: 24px;
      color: #fff;
      display: flex;
      background: linear-gradient(to right, #aaabad, #a3a7ac);
      justify-content: space-between;
      align-items: center;
      height: 70px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      .status {
        color: #fff;
        font-size: 26px;
      }
    }
    .mid {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 0 20px;
      h3 {
        font-size: 32px;
        line-height: 50px;
        padding: 20px 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .desc {
        font-size: 28px;
        color: #777;
        line-height: 40px;
        margin-top: 20px;
      }
      .text {
        margin-top: 20px;
        font-size: 26px;
        color: #666;
      }
    }
    .btn-blcok {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
      .btn {
        width: 250px;
        margin: 0 20px;
        &.nav-many {
          width: 300px;
        }
      }
    }
    .rule {
      font-size: 24px;
      color: #999;
      line-height: 40px;
      padding: 0 30px;
      margin-top: 20px;
    }
  }
}
</style>
